<template>
  <div class="t-cardCell">
    <div class="t-cardCell-left" v-if="data.imgurl || slotLeft">
      <t-icon 
        v-if="!slotLeft"
        :size="data.imgSize||'1.5rem'"
        :name="data.imgurl">
      </t-icon>
      <slot v-else name="left"></slot>
    </div>
    <ul class="t-cardCell-list">
      <li class="li" v-for="(item,index) in realData" :key="index">
        <div class="t-item">
          <label 
            class="label"
            v-if="item.slots.indexOf('label')==-1" 
            :style="item.style.label"
          >
            {{item.label}}
          </label>
          <slot v-else name="label"></slot>
          <span 
            class="value"
            v-if="item.slots.indexOf('value')==-1"
            :style="item.style.value"
          >
            {{item.value}}
          </span>
          <slot v-else name="value" :data="item"></slot>
        </div>
      </li>
      <li class="buttons">
        <div v-if="!slotButton && text!==false">
          <van-button type="primary" round size="mini" color="var(--van-primary-color)">{{text}}</van-button>
        </div>
        <slot v-else name="buttons"></slot>
      </li>
    </ul>
    <slot name="default"/>  
  </div>
</template>

<script lang="ts">
import { defineComponent ,reactive,watch,onMounted} from 'vue'
import {dataType} from '@/utils'
export default defineComponent({
  name: 'tCardCell',
  props:{
    data: Object,
    text: {
      type: [String,Boolean],
      default: '详情'
    },
    colon:{
      type:String,
      default:'block'
    },
    labelWidth: {
      type: String,
      default:'auto'
    }
  },
  setup (props,{slots,emit}) {
    let realData:Array<Record<string,any>> = reactive([]);
    const updata = function(data){
      realData.splice(0)
      data?.forEach((item:any,index)=>{
        let obj = {
          type: item.type || [dataType.normal],
          style : {
            label:{},
            value:{},
            ...item.style
          },
          slots:item.slots||[],
          label: item.label,
          value: item.value,
          key: item.key
        };
        if(obj.type.indexOf(dataType.slot) == -1){
          obj.slots = []
        }
        realData.push(obj)
      })
    };
    watch(()=>props.data,(data,prev)=>{
      updata(data?.dataList||[])
    })
    onMounted(()=>{
      updata(props.data?.dataList||[]);
    })
    return {
      realData,
      slotLeft: slots.left?true:false,
      slotButton: slots.buttons?true:false
    }
  }
})
</script>

<style lang="scss">
.t-cardCell{
  position: relative;
  display: flex;
  margin:10px 10px 0;
  padding: 5px 10px;
  border: 1px solid var(--van-gray-5);
  box-shadow: 0px 1px 1px 4px var(--van-gray-3);
  border-radius: 4px;
  color: var(--van-gray-7);
  .t-cardCell-left{
    float: left;
    display: flex;
    align-items: center;
    .t-icon{
      padding-left: 0;
    }
  }
  .t-cardCell-list{
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .li{
    display: flex;
    line-height: 20px;
    padding: 5px 0;
  }
  .buttons{
    position: absolute;
    bottom: 0;
    right:0;
    text-align: right;
    padding: 0 20px 20px 0;
  }
  .t-item{
    display: flex;
  }
  .value,.label{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-right:10px;
  }
  .label::after{
    display: v-bind(colon);
    position: absolute;
    top: 0;
    right: -5px;
    content: '：';
    font-weight: 600;
  }
  .label:empty{
    padding-left: 0;
    padding-right:0;
    & + .value{
      padding-left: 0;
      padding-right:0;
    }
  }
  .label:empty::after{
    display: none;
  }
  .label{
    width: v-bind(labelWidth);
  }
  .value{
    flex: 1;
    padding-left:5px;
  }
}
</style>
